<template>
  <div class="wrap">
<!--    <div id="editor"class="editor"></div>-->
    <div :id="toolbarId" class="toolbar">
    </div>
    <div :id="textId" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
<!--      <p>请输入内容</p>-->
    </div>
  </div>
</template>

<script>
  import Editor from "wangeditor"
  export default{
    name:"WangEditor",
    data(){
      return{
        editor:"",
        info_:null,
        toolbarId:'toolbarId'+Math.random(),
        textId:'textId'+Math.random(),
      }
    },
    model:{
      prop:"value",
      event:"change"
    },
    watch:{
      isClear(val){
        if(val){
          this.editor.txt.clear()
          this.info_=null
        }
      },
      value(val){
        this.editor.txt.html(val)
      }
    },
    props: {
      isClear: {
        type: Boolean,
        default: false
      },
      value:{
        type:String,
        default:""
      },
      // toolbarId:{
      //   type:String,
      //   default:"text"
      // },
      // textId:{
      //   type:String,
      //   default:"toolbar"
      // },
    },
    methods:{
      get(){
        this.editor=new Editor("#"+this.toolbarId,"#"+this.textId);
        this.editor.customConfig.zIndex = 1;
        this.editor.customConfig.uploadImgShowBase64=true;
        this.editor.customConfig.showLinkImg=false;
        this.editor.customConfig.onchange=(html)=>{
          this.info_=html
          // console.log(html)
          this.$emit("change",this.info_)
        }
        this.editor.create();
      }
    },
    mounted() {
      this.get();
    }
  }
</script>

<style>
  #editor{
    height: 500px;
  }
  .toolbar {
    border: 1px solid #ccc;
  }
  .text {
    border: 1px solid #ccc;
    border-top: 0;
    height: 20rem;
  }
</style>
